<template>
    <div>
        <van-nav-bar
            title = "地址列表"
            left-text = "返回"
            left-arrow
            @click-left = "goBack"
        />
        <van-address-list
            v-model="chosenAddressId"
            :list="list"
            :disabled-list="disabledList"
            disabled-text="以下地址超出配送范围"
            default-tag-text="默认"
            @add="onAdd"
            @edit="onEdit"
            @select="onSelect"
        />

        <van-popup
        v-model="showList"
        round
        position="bottom"
        @close="closePopup"
        style="height: 70%; padding-top: 5px;"
        >
            <van-address-edit
            :area-list="areaList"
            :address-info = "AddressInfo"
            :show-delete = "showDelete" 
            show-set-default
            show-search-result
            :search-result="searchResult"
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="editAddressSave"
            @change-area="onAddrConfirm"
            @delete="onDelete"
            @change-default="onSettingIsDefault"
            @change-detail="onChangeDetail"
            />
        </van-popup>
    </div>
</template>

<script>
    import {areaList} from "../assets/area/area.js"
    import axios from 'axios'
    import { Toast } from 'vant'
    export default {
        data(){
            return {
                chosenAddressId: '1',
                list: [],
                disabledList: [
                    {
                    id: '3',
                    name: '王五',
                    tel: '1320000000',
                    address: '浙江省杭州市滨江区江南大道 15 号',
                    isDefault: false,
                    },
                ],
                userID: null,
                showList: false,  //弹窗
                areaList,         //外部js引入的省市区对象
                searchResult: [],
                AddressInfo: {},
                address:{},   //存放省市区
                isDefault: null,  //是否默认地址
                showDelete: false,  //是否显示删除按钮
                selectGoods: [],  //结算时选中的商品
                totalPrice: 0,
            }
        },
        created(){
            if(localStorage.userInfo){
                let userInfo = JSON.parse(localStorage.userInfo)
                this.userID = userInfo.userId
            }
            this.selectGoods = this.$route.params.selectGoods ? this.$route.params.selectGoods : this.selectGoods
            this.totalPrice = this.$route.params.totalPrice ? this.$route.params.totalPrice : this.totalPrice
        },
        mounted(){
            this.$store.dispatch('HIDENAV')
            this.getAddressList()
        },
        destroyed(){
            this.$store.dispatch('SHOWNAV')
        },
        methods:{
            goBack(){
                this.$router.go(-1)
            },
            closePopup(){//弹窗关闭时刷新页面
                // location.reload() //刷新页面
            },
            onAdd() {
                this.AddressInfo = {isDefault:true}
                this.showList = true
            },
            onEdit(item, index) {
                console.log("-----------",item);
                // const provinceIndex = (item.address).indexOf('省')
                // const cityIndex = (item.address).indexOf('市')
                // const countyIndex = (item.address).indexOf('县')
                // const countyIndex1 = (item.address).indexOf('区')
                // // console.log("===============",countyIndex);
                // if(provinceIndex!==-1){
                //     this.AddressInfo.province = (item.address).substring(0,provinceIndex+1)
                //     if(cityIndex!==-1){
                //         this.AddressInfo.city = (item.address).substring(provinceIndex+1,cityIndex+1)
                //         if(countyIndex!==-1){
                //             this.AddressInfo.county = (item.address).substring(cityIndex+1,countyIndex+1)
                //         }
                //         if(countyIndex===-1&&countyIndex1!==-1){
                //             this.AddressInfo.county = (item.address).substring(cityIndex+1,countyIndex1+1)
                //         }
                //     }
                    
                // }
                this.showDelete = true
                this.AddressInfo.id = item.id,
                this.AddressInfo.name = item.name,
                this.AddressInfo.tel = item.tel,
                this.AddressInfo.addressDetail = item.addressDetail
                this.AddressInfo.isDefault = item.isDefault == "1" ? true : false
                this.AddressInfo.areaCode = item.areaCode
                console.log("=============",this.AddressInfo);
                this.showList = true
                // Toast('编辑地址:' + index);
            },
            onSelect(item, index){
                // console.log("----onSelect-----",item);
                this.$router.push({name:'productOrder'})
            },
            getAddressList(){
                axios({
                        url: 'http://localhost:3000/address/shippingAdderssList',
                        method: 'post',
                        data:{
                            userId: this.userID,
                        }
                    }).then(response =>{
                        console.log(response);
                        const {data,status} = response
                        if(status === 200){
                            if(data.message){
                                this.list = data.message
                            }
                        }else{
                            Toast('服务器错误，数据取得失败')
                        }
                    })
            },
            axiosModifyAddress(val){
                axios({
                    url: 'http://localhost:3000/address/modifyShippingAdderssList',
                    method: 'put',
                    data:{
                        id: val.id,
                        userId: this.userID,
                        name: val.name,
                        tel: val.tel,
                        province: val.province,
                        city: val.city,
                        county: val.county,
                        addressDetail: val.addressDetail,
                        areaCode: val.areaCode,
                        isDefault: val.isDefault,
                        address: val.province + val.city + val.county + val.addressDetail,
                    }
                }).then(response =>{
                    console.log(response);
                    location.reload() //刷新页面
                })
            },
            axiosAddAddress(val){
                axios({
                    url: 'http://localhost:3000/address/addShippingAdderssList',
                    method: 'post',
                    data:{
                        userId: this.userID,
                        name: val.name,
                        tel: val.tel,
                        province: val.province,
                        city: val.city,
                        county: val.county,
                        addressDetail: val.addressDetail,
                        areaCode: val.areaCode,
                        isDefault: val.isDefault,
                        address: val.province + val.city + val.county + val.addressDetail,
                    }
                }).then(response =>{
                    console.log(response);
                    location.reload() //刷新页面
                })
            },
            editAddressSave(val){
                if(!val.id){
                    this.axiosAddAddress(val)
                }else{
                    this.axiosModifyAddress(val)
                }
            },
            onDelete(val) {//确认删除地址时触发函数	
                axios({
                    url: 'http://localhost:3000/address/deleteShippingAdderssList',
                    method: 'delete',
                    data:{
                        id: val.id,
                    }
                }).then(response =>{
                    console.log(response);
                    location.reload() //刷新页面
                })
            },
            onChangeDetail(val) {
                this.addressDetail = val
                // console.log("-----addressDetail-----",this.addressDetail);
            },
            onAddrConfirm(e){//修改收件地区时触发函数
                if (e[0] && e[1] && e[2]){
                    this.address.province = e[0]
                    this.address.city = e[1]
                    this.address.county = e[2]
                }
                console.log("-----------省市区------------",this.address);
            },
            onSettingIsDefault(e){//切换是否使用默认地址时触发
                this.isDeefault = e
                console.log("-----isDefault-------",this.isDeefault);
            }
        }
        
        
    }
</script>

<style >
    
</style>